<template>
	<view class="warp">
		<u-navbar
			title-color="#fff"
			back-icon-color="#fff"
			z-index="9999"
			:is-fixed="isFixed"
			:is-back="isBack"
			:background="background"
			:back-text-style="{ color: '#fff' }"
			:title="title"
			:custom-back="pageBack"
			:back-icon-name="backIconName"
		>
			<view class="navbar-right u-flex" slot="right">
				<view class="message-box right-item" @click.stop="openPage('/pages/workbench/logistics/add')">
					<u-icon name="plus" size="38" color="#fff" style="margin-right:30rpx;"></u-icon>
				</view>
				<view class="message-box right-item" @click="showSearch=true">
					<u-icon name="search" size="38" color="#fff" style="margin-right:30rpx;"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="list">
			<view class="item u-flex" @click.stop="openPage('/pages/workbench/logistics/detail')">
				<view class="pic">
					<image src="https://uviewui.com/common/logo.png" mode="widthFix"></image>
				</view>
				<view class="info u-flex-1">
					<view class="name u-font-lg">车辆名称</view>
					<view class="carClass u-font-20 u-color-999">
						器材及数量：<text>绳索(5)、</text><text>合金阶梯(1)等</text>
					</view>
					<view class="carClass u-font-20 u-color-999">
						存放位置：停车场
					</view>
					<view class="carClass u-font-20 u-color-999">
						状态：<text class="u-type-error">护养中</text>
					</view>
					<view class="operBtn">
					  <u-button type="success" size="mini" @click.stop="openPage('/pages/workbench/logistics/inspect')">巡检</u-button>
					</view>
				</view>
				
			</view>
			<view class="item u-flex" @click.stop="openPage('/pages/workbench/logistics/detail')">
				<view class="pic">
					<image src="https://uviewui.com/common/logo.png" mode="widthFix"></image>
				</view>
				<view class="info u-flex-1">
					<view class="name u-font-lg">装备名称</view>
					<view class="carClass u-font-20 u-color-999">
						装备及数量：<text>绳索(5)、</text><text>合金阶梯(1)等</text>
					</view>
					<view class="carClass u-font-20 u-color-999">
						存放位置：停车场
					</view>
					<view class="carClass u-font-20 u-color-999">
						状态：<text class="u-type-success">空闲</text>
					</view>
					<view class="operBtn">
					  <u-button type="success" size="mini" @click.stop="openPage('/pages/workbench/logistics/inspect')">巡检</u-button>
					</view>
				</view>
				
			</view>
		</view>
		<u-picker mode="time" v-model="timerShow" :params="params" @confirm="timerConfirm"></u-picker>
		<u-popup v-model="showSearch" mode="right" width="80%">
			<view class="myform">
				<view class="formItem">
					<view class="label">车辆类型</view>
					<u-input :border="border" type="select" :select-open="actionCarTypeShow" v-model="model.carType" placeholder="请选择车辆分类" @click="actionCarTypeShow = true"></u-input>
				</view>
				<view class="formItem">
					<view class="label">器材类型</view>
					<u-input :border="border" type="select" :select-open="actionCarTypeShow" v-model="model.carType" placeholder="请选择器材类型" @click="actionCarTypeShow = true"></u-input>
				</view>
				<view class="formItem">
					<view class="label">器材数量</view>
					<u-input :border="border" type="text" v-model="model.carName" placeholder="请输入器材数量"></u-input>
				</view>
				<view class="formItem">
					<view class="label">车辆名称</view>
					<u-input :border="border" type="text" v-model="model.carName" placeholder="请输入车辆名称"></u-input>
				</view>
				<view class="formItem">
					<view class="label">所在队站</view>
					<u-input :border="border" type="select" :select-open="actionCarTypeShow" v-model="model.carType" placeholder="请选择所在队站" @click="actionCarTypeShow = true"></u-input>
				</view>
				<view class="formItem">
					<view class="label">购买时间</view>
					<u-input :border="border" type="picker" v-model="model.buyTime" placeholder="请选择购买时间" @click="buyTimeShow = true"></u-input>
				</view>
				<view class="formItem">
					<view class="label">使用年限</view>
					<u-input :border="border" type="text" v-model="model.carAge" placeholder="请输入使用年限"></u-input>
				</view>
				<view class="u-m-t-40">
					<u-button type="primary" @click="showSearch = false">搜索</u-button>
				</view>
			</view>
		</u-popup>
		<u-action-sheet :list="carTypeList" v-model="actionCarTypeShow" @click="carTypeChoose"></u-action-sheet>
		<u-picker mode="time" v-model="buyTimeShow" :params="params" @confirm="buyTimerConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				border:true,
				model:{
					carType:'',
					carName:'',
					buyTime:'',
					carAge:''
				},
				actionCarTypeShow:false,
				carTypeList:['消防车','代步车','轿车','商务车'],
				buyTimeShow:false,
				title: '车装管理',
				background: { backgroundColor: '#0251b6' },
				backIconName: 'nav-back',
				right: false,
				isBack: true,
				isFixed: true,
				name:'',
				myDate:'',
				timerShow:false,
				params: {
					year: true,
					month: true,
					day: true
				},
				showSearch:false
			};
		},
		methods:{
			//页面跳转
			openPage(url) {
				this.$u.route({
					url: url
				});
			},
			pageBack(){
				uni.navigateBack({
					delta:1
				})
				// javascript:history.back();
			},
			carTypeChoose(){
				
			},
			buyTimerConfirm(){},
			timerConfirm(){},
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #f8f8f8;
}
.myform{
	padding:20rpx;
	.formItem{
		margin-bottom:20rpx;
		.label{
			margin-bottom:10rpx;
		}
	}
}
.list{
	.item{
		background: #fff;
		border-radius: 0.3em;
		box-shadow: 0 0 5px rgba(0,0,0,0.2);
		padding: 20rpx;
		margin:20rpx;
		.pic{
			width: 100rpx;
			height:100rpx;
			image{
				width: 100%;
			}
		}
		.info{
			margin-left:20rpx;
		}
    .operBtn{
      padding:0 20rpx 0 0;
      text-align: right;
    }
  }
 
}
</style>
